This disclosure relates to systems and methods for creating interactive visual content.
A markup language is a tool for describing the structure and content of an electronic document that is to be viewed or printed on a computer output device such as a computer monitor or printer. Conventional markup languages typically include instructions for describing visual content that is displayed when the electronic document is viewed or printed. Such visual content can include text and graphics. For example, one such set of instructions can be used to retrieve and display an image stored at a specified location (e.g., on a disk drive). Conventional markup languages often also include instructions that allow a designer of such a document to embed user interface controls, applets, and scripts in the document. This allows the designer to create an interactive document that can receive information from a user viewing the document and/or perform some operation (e.g., perform a calculation or change the displayed visual content).
One example of a markup language is the hypertext markup language (HTML). HTML is commonly used to describe HTML documents that are read and displayed by web browser applications. It is common for such HTML documents to specify that one or more images are to be displayed by the web browser as a part of the HTML document. Typically, an web browser will retrieve an HTML document and any associated images from a remote server using a computer network such as the Internet. In order to facilitate transmission across a computer network, a large image associated with such an HTML document can be divided into several smaller slices, which can be separately stored and transmitted across the computer network to the web browser. When the web browser displays the HTML document, the browser typically reassembles the sliced image by displaying the slices in an HTML table.
Such image slicing techniques are also used to create visual effects such as “rollover” effects. For example, the designer of an HTML document can identify a particular slice of a sliced image as a trigger slice (also referred to as a “hotspot”). Then, the designer can embed JAVASCRIPT™ instructions in the HTML document, which are executed by the application used to view the document. The embedded instructions can include instructions that replace the trigger slice in the HTML table with a different image slice (referred to here as a “swap slice”) when a specified user interface event occurs (referred to here as the “trigger event”). Instead of, or in addition to, swapping the trigger slice, the embedded instructions can include instructions that replace other slices in the HTML table with other swap slices when the trigger event occurs (this operation is commonly referred to as a “secondary rollover effect”). Examples of trigger events include the user moving the cursor over the trigger slice (commonly referred to as a “rollover” event), the user clicking a mouse button while the cursor is positioned over the trigger slice (commonly referred to as a “mouse down” event), and the user subsequently releasing the mouse button while the cursor is positioned over the trigger slice (commonly referred to as a “mouse up” event).
Manually creating such visual effects can be tedious, however. Some conventional computer graphics programs automatically generate the HTML and JAVASCRIPT instructions required to create such visual effects. Such conventional graphics programs typically require a designer of such an HTML document to identify manually image slices that the web browser will replace with swap slices when the trigger event occurs. After the designer has identified the image slices that will be replaced, such conventional computer graphics programs typically allow the designer to create each swap slice, for example, by editing a copy of the image slice that will be replaced. However, typically the designer must make such edits within the confines of the selected image slices.